<template>
	<el-dialog v-model="dialogVisible" title="参数设置" width="430" class="qc-custom-dialog">
		<el-scrollbar>
			<div class="code-info">
				<el-form ref="paramTranslateRef" :model="ruleForm" label-width="80px" class="edit-form-wrap">
					<el-form-item label="电桩编码" class="bottom-wrap">
						<div>{{ ruleForm.equipmentCode }}</div>
					</el-form-item>
					<el-form-item label="" class="bottom-wrap">
						<el-radio-group v-model="radio" @change="changeType">
							<el-radio v-model="radio" label="0">查询</el-radio>
							<el-radio v-model="radio" label="1">设置</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="参数编号" class="bottom-wrap">
						<el-input v-model="ruleForm.paramCode" placeholder="请输入参数编号"></el-input>
					</el-form-item>
					<el-form-item label="参数值" class="bottom-wrap">
						<el-input :disabled="radio=='0'" v-model="ruleForm.paramValue"
							:placeholder="radio=='0'?'':'请输入参数值'"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</el-scrollbar>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="hide">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="dialog-price">
	import { FormInstance, ElLoading } from 'element-plus';
	import { reactive, ref } from 'vue';
	import { getTranslate, paramTranslate } from '@/service/apis/pile';

	let dialogVisible = ref(false);
	const radio = ref('0');
	const paramTranslateRef = ref<FormInstance>();

	const ruleForm = reactive({
		id: '',
		equipmentCode: '',
		paramCode: '',
		paramValue: ''
	});

	// 显示弹框
	const show = (row : any) => {
		radio.value = '0';
		ruleForm.paramCode = '';
		ruleForm.paramValue = '';
		ruleForm.id = row.id;
		ruleForm.equipmentCode = row.equipmentCode;
		dialogVisible.value = true;
	};

	// 关闭弹框
	const hide = () => {
		paramTranslate({
			id: ruleForm.id,
			equipmentCode: ruleForm.equipmentCode,
			type: radio.value,
			paramNum: ruleForm.paramCode,
			values: radio.value == '0' ? null : ruleForm.paramValue
		}).then((res : any) => {
			if (radio.value == "0") {
				let loadingInstance = ElLoading.service({
					lock: true,
					text: '加载中',
					background: 'rgba(0, 0, 0, 0.7)',
				});
				setTimeout(() => {
					getTranslate({
						id: ruleForm.id,
						equipmentCode: ruleForm.equipmentCode,
						paramNum: ruleForm.paramCode,
					}).then((res : any) => {
						// ruleForm.paramValue = res;
						ruleForm.paramValue = removeNullCharacters(res)
					})
					nextTick(() => {
						loadingInstance.close()
					})
				}, 3000);
			} else {
				dialogVisible.value = false;
				ElMessage({
					showClose: true,
					message: '设置成功！',
					type: 'success',
				});
			}
		})
	};

	const changeType = (val : any) => {
		ruleForm.paramCode = "";
		ruleForm.paramValue = "";
	};

	defineExpose({
		show,
	});

	const removeNullCharacters = (str : any) : string => {
		return str.replace(/\u0000/g, '');
	}
</script>

<style lang="scss" scoped>
	.code-info {
		max-height: 50vh;
	}
</style>